<template>
  <el-card style="width: 900px;height: 100vh">

  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <div style="width: 850px;height: 35vh">
      <el-tab-pane label="文章数据" name="first">
      <el-row :gutter="12">
        <el-col :span="8">
      <el-card style="height: 15vh;width: 250px" shadow="never">
      <div style="position: relative;margin-left: 80px">总文章数
        <h1 style=" position: relative;font-size: 50px;margin: 0">27</h1>
        较前日 +3
      </div>
      </el-card>
        <el-card style="height: 15vh;width: 250px;margin-top: 15px" shadow="never">
          <div style="position: relative;margin-left: 80px">文章点赞数
            <h1 style=" position: relative;font-size: 50px;margin: 0">133</h1>
            较前日 +18
          </div>
      </el-card>
        </el-col>
        <el-col :span="8">

            <el-card style="height: 15vh;width: 250px" shadow="never">
              <div style="position: relative;margin-left: 80px">文章展现数
                <h1 style=" position: relative;font-size: 50px;margin: 0">80</h1>
                较前日 +16
              </div>
            </el-card>
            <el-card style="height: 15vh;width: 250px;margin-top: 15px" shadow="never">
              <div style="position: relative;margin-left: 80px">文章评论数
                <h1 style=" position: relative;font-size: 50px;margin: 0">7</h1>
                较前日 +3
              </div>
            </el-card>
        </el-col>

        <el-col :span="8">
            <el-card style="height: 15vh;width: 250px" shadow="never">
              <div style="position: relative;margin-left: 80px">文章阅读数
                <h1 style=" position: relative;font-size: 50px;margin: 0">15</h1>
                较前日 +3
              </div>
            </el-card>
            <el-card style="height: 15vh;width: 250px;margin-top: 15px" shadow="never">
              <div style="position: relative;margin-left: 80px">文章收藏数
                <h1 style=" position: relative;font-size: 50px;margin: 0">4</h1>
                较前日 +1
              </div>
            </el-card>
        </el-col>
  </el-row>
      </el-tab-pane>
    <el-tab-pane label="数据专栏" name="second">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card style="height: 15vh;width: 250px" shadow="never">
            <div style="position: relative;margin-left: 80px">总点赞数
              <h1 style=" position: relative;font-size: 50px;margin: 0">211</h1>
              较前日 +22
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card style="height: 15vh;width: 250px" shadow="never">
            <div style="position: relative;margin-left: 80px">总打赏数
              <h1 style=" position: relative;font-size: 50px;margin: 0">33</h1>
              较前日 +12
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-tab-pane>

    </div>




  </el-tabs>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
const activeName = ref('first')
const activeName2 = ref('first')

</script>

<style scoped>

</style>